// <script setup lang="ts">
// import { ref } from 'vue'
// import task1 from '../../../../tasks/task-1'
// import task2 from '../../../../tasks/task-2'
// import task3 from '../../../../tasks/task-3'
// import { WorkerFactory } from '../../../../utils/worker'

// const task1Percentage = ref(0)
// const task2Percentage = ref(0)
// const task3Percentage = ref(0)
// const task1Loading = ref(false)
// const task2Loading = ref(false)
// const task3Loading = ref(false)

// const visible = defineModel('visible', { default: false })

// function onGetFile() {
//   // window.showOpenFilePicker()
// }

// function onTask1() {
//   task1Loading.value = true
//   const { workerId, instance } = new WorkerFactory(task1).create()
//   instance.send(workerId, { a: 1, b: 2 }, (res) => {
//     task1Percentage.value = res
//     if (res === 100) {
//       task1Loading.value = false
//     }
//   })
// }

// function onTask2() {
//   task2Loading.value = true
//   const { workerId, instance } = new WorkerFactory(task2).create()
//   instance.send(workerId, { a: 3, b: 4 }, (res) => {
//     task2Percentage.value = res
//     if (res === 100) {
//       task2Loading.value = false
//     }
//   })
// }

// function onTask3() {
//   task3Loading.value = true
//   const { workerId, instance } = new WorkerFactory(task3).create()
//   instance.send(workerId, { a: 3, b: 4 }, (res) => {
//     task3Percentage.value = res
//     if (res === 100) {
//       task3Loading.value = false
//     }
//   })
// }
// </script>

// <template>
//   <el-drawer v-model="visible" direction="ltr" size="80%" :with-header="false">
//     <el-space wrap>
//       <el-button type="primary" round @click="onGetFile()">
//         获取文件
//       </el-button>

//       <el-button :loading="task1Loading" type="primary" round @click="onTask1()">
//         任务1耗时处理
//       </el-button>

//       <el-button :loading="task2Loading" type="primary" round @click="onTask2()">
//         任务2耗时处理
//       </el-button>

//       <el-button :loading="task3Loading" type="primary" round @click="onTask3()">
//         任务3耗时处理
//       </el-button>
//     </el-space>

//     <div style="margin-top: 28px;">
//       任务1进度：
//     </div>
//     <el-progress :text-inside="true" :stroke-width="26" :percentage="task1Percentage" />

//     <div style="margin-top: 28px;">
//       任务2进度：
//     </div>
//     <el-progress :text-inside="true" :stroke-width="26" :percentage="task2Percentage" />

//     <div style="margin-top: 28px;">
//       任务3进度：
//     </div>
//     <el-progress :text-inside="true" :stroke-width="26" :percentage="task3Percentage" />
//   </el-drawer>
// </template>
